<template>
  <input type="text" v-model="studentName">
  <br>
  <children></children>
</template>

<script>
import { reactive, readonly, ref } from '@vue/reactivity'
import children from './child1.vue'
import { provide } from '@vue/runtime-core'
export default {
    components: {
        children
    },
    setup () {
        const studentName = ref('刘艺凡')
        const grode = reactive({
            Vue: 90,
            jQuery: 98
        })
        const updateLocation = () => {
            studentName.value = '张二'
            grode.Vue = 99
        }

        provide('studentName', readonly(studentName))
        provide('grode', readonly(grode))
        provide('updateLocation', updateLocation)
        return {
            studentName
        }
    }
}
</script>

<style>

</style>